<template>
  <div class="app-container">
    <dv-border-box-11 title="通用印刷体（高精度版）">
      <div style="padding: 60px 60px 100px;">
        <dv-decoration-10 style="width:100%;height:40px;"/>
        <h1>核心能力</h1>
        支持图像整体文字的检测和识别，返回文字框位置与文字内容。相比通用印刷体识别接口，准确率和召回率更高。
        <el-row>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="text-align:center;margin: 20px;padding: 20px;height: 600px">
                <div style="margin: 10px">
                  <el-radio v-model="form.isPdf" label="false">图片</el-radio>
                  <el-radio v-model="form.isPdf" label="true">pdf</el-radio>
                </div>
                <div v-show="form.isPdf=='true'" style="margin: 10px">
                  <el-input-number v-model="form.pdfPageNumber" :min="1" :max="1000" label="需要识别的PDF页码"></el-input-number>
                </div>
                <image-identify-oss @input="getUrlList"></image-identify-oss>
                <el-input placeholder="请输入在线图片/pdf的url（上传和输入url二选一）" v-model="form.imageUrl" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchGeneralAccurateOCR"></el-button>
                </el-input>
              </div>
            </dv-border-box-9>
          </el-col>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="height: 600px;margin: 20px;padding: 20px">
                <el-collapse v-model="collapse" accordion>
                  <el-collapse-item title="识别结果" name="1">
                    <el-scrollbar style="height: 400px;">
                      <div v-for="(o,index) in responseData" :key="index" class="text item">{{ o.detectedText }}</div>
                    </el-scrollbar>
                  </el-collapse-item>
                  <el-collapse-item title="Request" name="2">
                    <json-viewer :value="form" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                  </el-collapse-item>
                  <el-collapse-item title="Response" name="3">
                    <el-scrollbar style="height: 400px;">
                      <json-viewer :value="responseData" closed="true" :expand-depth="1" icon-style copyable boxed :sort="true" :expanded="true" :preview-mode="false"></json-viewer>
                    </el-scrollbar>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </dv-border-box-9>
          </el-col>
        </el-row>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import {GeneralAccurateOCR, generalAccurateOCR} from "@/api/txcloud/ocr/general";

export default {
  components: {
    JsonViewer
  },
  data() {
    return {
      collapse: '0',
      form: {
        isPdf: "false",
        pdfPageNumber: 1,
      },
      responseData: {},
    };
  },
  created() {
  },
  methods: {
    searchGeneralAccurateOCR() {
      generalAccurateOCR(this.form).then(res => {
          if (res.code === 200) {
            this.collapse = '1'
            this.responseData = res.data.textDetections
            this.$modal.msgSuccess(res.msg);
          } else {
            this.$modal.msgError(res.msg);
          }
        }
      );
    },
    getUrlList(val) {
      this.form.imageUrl = val
    },
    getImageBase64(val) {
      this.form.imageBase64 = val
    },
  }
};
</script>
<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: #fff;

  .el-select {
    width: 10vw;
  }
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
